import React, { useEffect, useState } from 'react';
import VirtualList from 'rc-virtual-list';
import { Image, List, message, Spin } from 'antd';
const fakeDataUrl =
  'https://randomuser.me/api/?results=20&inc=name,gender,email,nat,picture&noinfo';
const ContainerHeight = 700;
const OuterApiPage = () => {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const appendData = () => {
    const url = 'https://imdb-top-100-movies.p.rapidapi.com/';
    const headers = {
      'X-RapidAPI-Key': '816c546fbfmshb6cb1829fa16996p11f36ejsn3d6023b2aee3',
      'X-RapidAPI-Host': 'imdb-top-100-movies.p.rapidapi.com'
    };
    setIsLoading(true);
    fetch(url, {
      method: 'GET',
      headers: headers
    })
      .then(response => response.json())
      .then(data => {
        console.log(data);
        setData(data)
        setIsLoading(false);
        message.success('HOT TOP 100 Movie loaded!!!')
      })
      .catch(error => {
        setIsLoading(false);
        console.error('Error:', error);
      });
  };
  useEffect(() => {
    appendData();
  }, []);
  const onScroll = (e) => {
    if (e.currentTarget.scrollHeight - e.currentTarget.scrollTop === ContainerHeight) {
      appendData();
    }
  };
  return (
    <Spin spinning={isLoading}>
      <List>
        <VirtualList
          data={data}
          height={ContainerHeight}
          itemHeight={47}
          itemKey="email"
          onScroll={onScroll}
        >
          {(item) => (
            <List.Item key={item.id}>
              <List.Item.Meta
                avatar={<Image src={item.image} width={26} />}
                title={<a href={item.imdb_link} target="_blank" >{item.title}</a>}
                description={item.description}
              />
              <div>{item.id}</div>
            </List.Item>
          )}
        </VirtualList>
      </List>
    </Spin>
  );
};
export default OuterApiPage;